//获取canvas上下文
const ctx = document.getElementById('canvas').getContext('2d');
// 创建一个线性渐变;
const linearGradient = ctx.createLinearGradient(0, 0, 100, 100); //参数是渐变起始点和结束点的坐标
//设置渐变颜色
linearGradient.addColorStop(0, 'gold'); //参数是渐变的位置和颜色,0是起始位置,1是结束位置
linearGradient.addColorStop(0.5, 'red');
linearGradient.addColorStop(1, 'blue');
//设置渐变填充
ctx.fillStyle = linearGradient;
//绘制矩形
ctx.fillRect(0, 0, 100, 100);
